layui.use(['layer', 'table'], function () {
    let table = layui.table,
        layer = layui.layer;

    layui.layer.load(0, {shade: [0.5, '#fff']});
    /*查询所有公告的信息*/
    table.render({
        elem: '#msg-table'
        , toolbar: '#msg-table-toolbar'
        , height: 700
        , url: "/getMsg"
        , cols: [
            [
                {field: 'msgId', title: '编号', width: 90, align: 'center', sort: true},
                {field: 'msgTitle', title: '标题', width: 120, align: 'center'},
                {field: 'msgFrom', title: '发布人', width: 120, align: 'center'},
                {field: 'msgTime', title: '发布时间', width: 230, align: 'center'},
                {field: 'msgContent', title: '公告内容', align: 'center'},
                {
                    field: 'msgFilename', title: '附件', width: 150, align: 'center', templet: function (res) {
                        if (res.msgFilename === null || res.msgFilename === '') {
                            return '无附件';
                        } else {  //路径 msgFilepath
                            return '<div><a href="/downloadFile?filename=' + res.msgFilename + '&url=' + res.msgFilepath + '" style="color: #0000FF">' + res.msgFilename + '</a></div>';
                        }
                    }
                },
                {title: '操作', align: 'center', width: 180, toolbar: '#msg-table-tool'}
            ]
        ]
        // ,skin: 'line' //表格风格
        , even: true
        , page: true
        , loading: true
        , limits: [14, 28, 42]
        , limit: 14
        , text: {
            none: '<div class="layui-anim layui-anim-scaleSpring"  style="margin-top: 150px"><i class="layui-icon"  style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 50px" >&#xe664;</i><br>' +
                '<br><br><br><br><div class="layui-text" style="font-size: 25px;margin-top: 25px;color: #009f95">好像没有没找到数据呢</div></div>'
            ,
            error: '<div style="margin-top: 150px"><i class="layui-icon"  style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 50px" >&#xe664;</i><br>' +
                '<br><div class="layui-text" style="font-size: 25px;margin-top: 25px;color: #009f95">好像没有出错了呢</div></div>'
        }
    });


    //监听表头事件  监听对象  msg-table
    table.on('toolbar(msg-table)', function (obj) {
        //查询事件
        if (obj.event === 'queryMsg') {  //按关键字搜索事件
            let queryKey = $('#queryKey').val().trim(); //获取搜索的关键字
            if (queryKey === null || queryKey === '') {
                layer.msg('请输入要查询内容', {offset: '250px', time: 1500, anim: 6, area: ['200px', '50px']});
                return false;
            }
            table.reload('msg-table', {
                where: {queryKey: queryKey} //设定异步数据接口的额外参数
                //,url: '/queryAll.indexDo' //重载接口地址 如果接口地址与原地址一样则不用写此项参数
            });

        } else if (obj.event === 'queryAll') {  //查询全部
            table.reload('msg-table', {
                where: {queryKey: null}
            });
        }
    });


    //*监听操作栏事件 监听对象msg-table
    table.on('tool(msg-table)', function (obj) {
        let data = obj.data;     //json格式的数据
        if (obj.event === 'detail') {  //查看公告详情
            layer.open({
                type: 1
                , offset: 50
                , skin: 'layui-layer-rim'
                , area: ['540px', '550px']
                , content: $("#msg-detail")
                , title: '公告详情内容'
                , success: function (layerObj) {
                    $(".layui-layer-shade").appendTo(layerObj.parent());
                    //设置详情回显数据
                    $("#msg-id").html(data.msgId);
                    $("#msg-title").html(data.msgTitle);
                    $("#msg-author").html(data.msgFrom);
                    $("#msg-time").html(data.msgTime);
                    $("#msg-content").html(data.msgContent);
                    if (data.msgFilename === null || data.msgFilename === '') {
                        $("#msg-fileName").html('无附件');
                    } else {
                        $("#msg-fileName").html('<div><a href="/downloadFile?filename=' + res.msgFilename + '&url=' + res.msgFilepath + '"  style="color: #0000FF">' + data.msgFilename + '</a></div>');
                    }
                }
                , end: function () {
                    $("#msg-detail").css("display", 'none');
                }
            });
        }
    });
    layui.layer.closeAll('loading');
});